

<template>
	 <el-container style="height: 100%;width:100%;padding:0 ;position:fixed">
	 <el-header style="width:100%;padding:0;">
	  <Navbar style="height:60px"></Navbar>
	</el-header>
	
		<el-container>
			<el-aside style="background-color: #fff; width: 75%;height: 89%; max-height: 720px; margin: 1%;  border-radius: 2%;  box-shadow:0px 0px 12px rgba(0, 0, 0, 0.12); padding: 20px ; ">
			
				<div style="height: 100%; margin-bottom: 2%;text-align: left;"  >
			 <div class="exam-container" style="padding-left:1%;" >	
				  
				  <div v-if="datas.data.length==0&&datas.status">
					   <el-empty description="请在右侧添加题目👉" style="width: 100%; height: 100%; margin:10% 0 0 0;" />
				  </div>
				  <div v-else-if="datas.data.length==0&&datas.status==false">
				  					   <el-empty description="该试卷没发布题目" style="width: 100%; height: 100%; margin:10% 0 0 0;" />
				  </div>
				  <el-form :model="datas" v-else >
				
							<div  v-for="(input, index) in datas.data" :key="index" :id="'question-' + index" style="padding: 2%; margin-bottom: 2%; min-height: 300px;box-shadow:0px 0px 12px rgba(0, 0, 0, 0.12); width: 80%;">
								<el-form-item >
									<template #default="scope" >
										<!-- 单选 -->
										<div style="display: flex;flex-direction: column; width: 80%;"  v-if="input.q_type == '0'" >
											<h1>第{{index+1}}题:(单选题)</h1>
											
											<div style="display: flex;flex-direction: row;margin-bottom:10px ;">	
											<span style="width:52px">题目：</span>	<el-input v-model="input.content.title"   placeholder="请输入题目"></el-input>
											</div>
											
											<div style="display: flex;flex-direction: column;margin-bottom: 10px;">
												<span>选项:</span>
												<div style="display: flex;flex-direction: row; margin-bottom: 1%;">
													<span>A:&nbsp;&nbsp;</span><el-input v-model="input.content.A"></el-input>
												</div>
												<div style="display: flex;flex-direction: row;margin-bottom: 1%;">
													<span>B:&nbsp;&nbsp;</span><el-input v-model="input.content.B"></el-input>
												</div>
												<div style="display: flex;flex-direction: row;margin-bottom: 1%;">
													<span>C:&nbsp;&nbsp;</span><el-input v-model="input.content.C"></el-input>
												</div>
												<div style="display: flex;flex-direction: row;">
													<span>D:&nbsp;&nbsp;</span><el-input v-model="input.content.D"></el-input>
												</div>
											</div>
											
											<div style=" display: flex;flex-direction: row;">
												<span>正确答案：</span>
												<el-radio-group v-model="input.answer[0]" size="medium" style=" display: flex;flex-direction: row;" >
												  <el-radio  label="A" style="width: 50px;" >A</el-radio>
												  <el-radio label="B" style="width: 50px;" >B</el-radio>
												  <el-radio label="C" style="width: 50px;">C</el-radio>
												  <el-radio  label="D" style="width: 50px;">D</el-radio>
												</el-radio-group>
												
											</div >
												
											<div style=" display: flex;flex-direction: row; margin: 0 0  2% 0;" >
												<span style="width:52px">标签：</span>
												<el-input v-model="input.tags"></el-input>
											</div>
											<div style=" display: flex;flex-direction: row; margin: 0 0  2% 0;" >
												<span style="width:52px">分值：</span>
												<el-input v-model="input.points"></el-input>
											</div>
												<el-button @click="removeInput(index)" type="danger">删除</el-button>		
										</div>
										<!-- 填空题 -->
										<div style="display: flex;flex-direction: column; width: 80%;"  v-else-if="input.q_type == 1" >
											<h1>第{{index+1}}题:(填空题)</h1>
											
											<div style="display: flex;flex-direction: row;margin-bottom:10px ;">	
											<span style="width:52px">题目：</span>	
											<el-input v-model="input.content.title"   placeholder="请输入题目"></el-input>
											</div>
											
											<div style="display: flex;flex-direction: column;margin-bottom: 10px;">
												<span>其他:</span>
												<el-input  :rows="15"  type="textarea" v-model="input.content.othercontent"></el-input>
											</div>
											<div style="display: flex; flex-direction: row; margin: 0px 0px 2%;">
												<span style="width: 80px;">正确答案：</span>
												<el-input v-model="input.answer[0]"></el-input>
												
											</div >
											<div style=" display: flex;flex-direction: row; margin: 0 0  2% 0;" >
												<span style="width:52px">标签：</span>
												<el-input v-model="input.tags"></el-input>
											</div>
											<div style=" display: flex;flex-direction: row; margin: 0 0  2% 0;" >
												<span style="width:52px">分值：</span>
												<el-input v-model="input.points"></el-input>
											</div>
											<el-button @click="removeInput(index)" type="danger">删除</el-button>				
										</div>
										<!-- 多选 -->
										<div style="display: flex;flex-direction: column; width: 80%;" v-else-if="input.q_type == 2" >
											<h1>第{{index+1}}题:(多选题)</h1>
											
											<div style="display: flex;flex-direction: row;margin-bottom:10px ;">	
												<span style="width:52px">题目：</span>	<el-input v-model="input.content.title"   placeholder="请输入题目"></el-input>
											</div>
											
											<div style="display: flex;flex-direction: column;margin-bottom: 10px;">
												<span>选项:</span>
												<div style="display: flex;flex-direction: row; margin-bottom: 1%;">
													<span>A:&nbsp;&nbsp;</span><el-input v-model="input.content.A"></el-input>
												</div>
												<div style="display: flex;flex-direction: row;margin-bottom: 1%;">
													<span>B:&nbsp;&nbsp;</span><el-input v-model="input.content.B"></el-input>
												</div>
												<div style="display: flex;flex-direction: row;margin-bottom: 1%;">
													<span>C:&nbsp;&nbsp;</span><el-input v-model="input.content.C"></el-input>
												</div>
												<div style="display: flex;flex-direction: row;">
													<span>D:&nbsp;&nbsp;</span><el-input v-model="input.content.D"></el-input>
												</div>
												<div style="display: flex;flex-direction: row;">
													<span>E:&nbsp;&nbsp;</span><el-input v-model="input.content.E"></el-input>
												</div>
											</div>
											
											<div style=" display: flex;flex-direction: row;">
												<span>正确答案：</span>
												  <el-checkbox-group v-model="input.answer" size="medium" style=" display: flex;flex-direction: row;" >
												  <el-checkbox  label="A" style="width: 50px;" >A</el-checkbox>
												  <el-checkbox label="B" style="width: 50px;" >B</el-checkbox>
												  <el-checkbox label="C" style="width: 50px;">C</el-checkbox>
												  <el-checkbox  label="D" style="width: 50px;">D</el-checkbox>
												  <el-checkbox  label="E" style="width: 50px;">E</el-checkbox>
												</el-checkbox-group>
											</div>
												
											<div style=" display: flex;flex-direction: row; margin: 0 0  2% 0;" >
												<span style="width:52px">标签：</span>
												<el-input v-model="input.tags"></el-input>
											</div>
											<div style=" display: flex;flex-direction: row; margin: 0 0  2% 0;" >
												<span style="width:52px">分值：</span>
												<el-input v-model="input.points"></el-input>
											</div>
											<el-button @click="removeInput(index)" type="danger">删除</el-button>				
										</div>
										
										<!-- 判断题 -->
										<div style="display: flex;flex-direction: column; width: 80%;" v-if="input.q_type == 3" >
											<h1>第{{index+1}}题:(判断题)</h1>
											
											<div style="display: flex;flex-direction: row;margin-bottom:10px ;">	
											<span style="width:52px">题目：</span>	<el-input v-model="input.content.title"  placeholder="请输入题目"></el-input>
											</div>
											
											<div style=" display: flex;flex-direction: row;">
												<span style="width: 52px;">正确答案：</span>
												<el-radio-group v-model="input.answer[0]" size="medium" style=" display: flex;flex-direction: row;" >
														<el-radio label="true">正确</el-radio>
														<el-radio label="false">错误</el-radio>
												</el-radio-group>
												
											</div >
												
											<div style=" display: flex;flex-direction: row; margin: 0 0  2% 0;" >
												<span style="width:52px">标签：</span>
												<el-input v-model="input.tags"></el-input>
											</div>
											<div style=" display: flex;flex-direction: row; margin: 0 0  2% 0;" >
												<span style="width:52px">分值：</span>
												<el-input v-model="input.points"> </el-input>
											</div>
											<el-button @click="removeInput(index)" type="danger">删除</el-button>	
										</div>
										<!-- 编程题 -->
										<div style="display: flex;flex-direction: column; width: 80%;"  v-else-if="input.q_type == 4" >
											<h1>第{{index+1}}题:(编程题)</h1>
											
											<div style="display: flex;flex-direction: row;margin-bottom:10px ;">	
											<span style="width:52px">题目：</span>	<el-input v-model="input.content.title"   placeholder="请输入题目"></el-input>
											</div>
											
											<div style="display: flex;flex-direction: column;margin-bottom: 10px;">
												<span>其他:</span>
												<el-input  :rows="15"  type="textarea" v-model="input.content.othercontent"></el-input>
											</div>
											<div style="display: flex;flex-direction: column;margin-bottom: 10px;">
												<span>参考答案:</span>
												<el-input  :rows="15"  type="textarea" v-model="input.answer[0]"></el-input>
											</div>
											<div style=" display: flex;flex-direction: row; margin: 0 0  2% 0;" >
												<span style="width:52px">标签：</span>
												<el-input v-model="input.tags"></el-input>
											</div>
											<div style=" display: flex;flex-direction: row; margin: 0 0  2% 0;" >
												<span style="width:52px">分值：</span>
												<el-input v-model="input.points"></el-input>
											</div>
											<el-button @click="removeInput(index)" type="danger">删除</el-button>				
										</div>
									</template>
								</el-form-item>
							</div>
							
							
							
							</el-form>
							</div>
			</div>	
			</el-aside>
			<el-main style="background-color: #fff; margin: 1%;  height: 89%; border-radius: 2%;   box-shadow:0px 0px 12px rgba(0, 0, 0, 0.12);">
				<h2>题目总览</h2>
				  <el-divider content-position="left">预览</el-divider>
				<div style="display: flex; flex-wrap: wrap; width: 230px;">
				  <div v-for="(test, index) in datas.data" :key="test.id" >
				    <div @click="jumpToQuestion(index)" style="margin-bottom: 2%; margin-left:4px; background-color: #f0d32c; color: #fff; border: 1px solid #e8e8e8; border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;" v-text="index + 1"></div>
					 </div>
				</div>
				<div class="submit-container" v-if="datas.status">
						
					<el-divider content-position="left"> ① 设置题目类型</el-divider>
					<el-select v-model="selecttype" name="questtp" :readonly="loading"  :clearable="true" placeholder="题目类型" >
						<el-option 
						v-for="item in datas.types" 
						:key="item.id"
						:label="item.name"
						:value="item.id"></el-option>
					</el-select>
					<el-button type="primary" @click="addInput" style="width: 250px;margin-top: 7%;"><el-icon style="color: #fff;"><CirclePlus /></el-icon>添加题目</el-button>
						<el-divider content-position="left"> ② 选择发布班级</el-divider>
						<el-select v-model="datas.checkclass" name="getclass" :readonly="loading"  :clearable="true" placeholder="选择发布班级" >
							<el-option 
							v-for="item in datas.classlist" 
							:key="item.id"
							:label="item.class_name"
							:value="item.id"></el-option>
						</el-select>
					<el-divider content-position="left"> ③ 发布</el-divider>
				  <el-button type="primary" size="medium" @click="submit" style="width: 250px;" :loading="loading"><el-icon style="color: #fff;"><CircleCheck /></el-icon>发&nbsp;&nbsp;布</el-button>
				</div>
				<div class="submit-container" v-else >
						
					<el-divider content-position="left">返回列表</el-divider>
				  <el-button type="primary" size="medium" @click="back" style="width: 250px;" :loading="loading"><el-icon style="color: #fff;"><Back /></el-icon>返回列表</el-button>
				</div>
				<!-- <img src="/src/assets/learn.png" alt="" style="width: 100%;margin-top: 4%;" /> -->
				
			</el-main>
		  </el-container>
		
	</el-container>
</template>

<script lang="ts" setup>
	import Navbar from '@/components/layouts/navbar.vue';
	import { ref,reactive ,onMounted} from 'vue'
	import { useRouter,useRoute } from 'vue-router'
	import axios from 'axios'
	import { ElMessage } from 'element-plus';
	import moment from 'moment';
	import { number } from 'echarts';
	const loading = ref(false)
	const router = useRouter()
	const route = useRoute()
	const back =()=>{
		router.push('/question/list')
	}
	const datas = reactive({
		paperid:"31444",
		time:"2023-03-23",
		status:'finished',
		types :[
			{id:0,name:'单选题'},{id:1,name:'填空题'},{id:2,name:'多选题'},{id:3,name:'判断题'},{id:4,name:'程序题'}
		],
		status:false,
		form:{
			answer:[
				
			]
		},
		classlist:[{
				class_name:"19级网络工程1班",
				id:"19413101"
			},{
				class_name:"19级网络工程2班",
				id:"19413102"
			}],
		checkclass:'',
		lines:2,
		data:[]
		
	})
const inputs = ref([])
const selecttype = ref('')
const addInput = () => {
	  if (selecttype.value===''){
		  ElMessage.error("请选择题目类型")
	  }
     else{
		 datas.data.push({ 
			 q_type:selecttype.value,
			 content: {
				 title:'',
				 A:'',
				 B:'',
				 C:'',
				 D:'',
				 E:'',
				 othercontent:''					
			 },
			 answer:[],
			 points:'',
			 tags:[],
			 paper_id:route.params.id,
			 class_id:datas.checkclass,
			 ttype:'new'
			 })

	 }
    }

const removeInput = (index) => {
     datas.data.splice(index, 1)
    }
const addNewLine = () => {
	      this.text += "\n";
		  }
const  jumpToQuestion = (index:any) =>{
		window.location.href='#question-' +index
	}


const getclasslist = async () => {
	try {
	  const response = await axios.get('/login/v1/authentication/class',{
			  headers: {
				'TOKEN': localStorage['token']
			  },
			  })
	  const data = response.data
	  if (data.code == 0) {
			datas.classlist = data.data.class
	  } 
	} catch (error) {
	  console.log(error)
	}
}
const getpaper = async() =>{
	const id = route.params.id
	try {
	    const response = await axios.get('/login/v1/examination/paperinfo?paperid='+id,
	        {
	            headers: {
	                'TOKEN': localStorage['token'],
	            },
	        })
		const data = response.data
		if (data.code == 0) {
			const date = new Date()
			const formattedTime = moment(date).format('YYYY-MM-DD')
			const date2 = new Date(data.data.paper.post_time)
			const formattedTime2 = moment(date2).format('YYYY-MM-DD')
			
			if(formattedTime<=formattedTime2 ){datas.status=true}else{datas.status=false}
			data.data.questions.forEach((item) => {
				item.content = JSON.parse(item.content.replace(/'/g, '"'))
				item.answer = JSON.parse(item.answer.replace(/'/g, '"'))
				})
			datas.data = data.data.questions
			
	  } 
	}catch (error) {
	  console.log(error)
	}
}
const submit = async () => {
    loading.value = true
    const list = []
    if (datas.checkclass == '') {
        ElMessage.error("选择发布班级")
        loading.value = false
        return
    }

    for (let i in datas.data) {
			if(datas.data[i].ttype=='new'){
				let tag = datas.data[i].tags.split(',')
				datas.data[i].tags = tag
				datas.data[i].class_id = datas.checkclass
				delete datas.data[i].ttype
			}
				
			list.push(datas.data[i])
			if (datas.data[i].answer.length == 0 || datas.data[i].points == '') {
			    ElMessage.error("请保证所有题目已填写答案和分值")
			    loading.value = false
			    return	
			}
    }

    const formdata = new FormData() // 创建FormData对象
    formdata.append('question_list', JSON.stringify(list)) // 添加字符串数据到FormData中

    try {
        const response = await axios.post('/login/v1/examination/questions',
            formdata, // 将数据添加到请求体中
            {
                headers: {
                    'CONTENT-TYPE': 'application/x-www-form-urlencoded', // 设置content-type头
                    'TOKEN': localStorage['token'],
                },
            })

        const data = response.data
        if (data.code == 0) {
            ElMessage.success("发布成功")
			router.push('/question/list')
        }
    } catch (error) {
        console.error(error)
    }
    loading.value = false
}

	onMounted(()=>{
		getclasslist()
		getpaper()
	})
	
	
	
</script>

<style >
	.bct .el-textarea__inner{
		width:600px;
		min-width: 600px !important;
		min-height:280px !important;
	}
	.submit-container{
		margin: 2% 0 2% 0;
	}
</style>